<template>
    <div class="app-container" v-loading="loading">
        <el-row style="height:99%">
            <el-col :span="5" style="height:100%;" >
                <el-card shadow="never" class="errorCard">
                    <div slot="header" class="errorHrader">
                        <span>异常详情</span>
                        <el-button style="float: right; padding: 3px 0" type="text" @click="handleUpdateProject(errorDatail.abnormalId)" >编辑</el-button>
                    </div>
                        <div class="show-img">
                            <img :src="titleImage(errorDatail.abnormalImg)"  fit="fit" alt="异常图片"/>
                        </div>
                        <ul class="list-group list-group-striped">
                            <li class="list-group-item">
                                <label title="异常点名称">异常点名称:</label>
                                <div class="pull-left" :title="errorDatail.abName">{{ errorDatail.abName }}</div>
                            </li>
                            <li class="list-group-item">
                                <label title="所属分区">所属分区:</label>
                                <div class="pull-left" :title="errorDatail.zoneName">{{ errorDatail.zoneName }}</div>
                            </li>
                            <li class="list-group-item">
                                <label title="坐标">坐标:</label>
                                <div class="pull-left" :title="dealThe_geom(errorDatail.theGeom)[0]+','+dealThe_geom(errorDatail.theGeom)[1]">{{ dealThe_geom(errorDatail.theGeom)[0]+","+dealThe_geom(errorDatail.theGeom)[1]}}</div>
                            </li>
                           
                            <li class="list-group-item">
                                <label>预算长度(m):</label>
                                <div class="pull-left">{{ errorDatail.abLength }}</div>
                            </li>
                            <li class="list-group-item">
                                <label>预算宽度(m):</label>
                                <div class="pull-left">{{ errorDatail.abWidth }}</div>
                            </li>
                            <!-- <li class="list-group-item">
                                <label>异常编写人:</label>
                                <div class="pull-left">{{ errorDatail.createBy }}</div>
                            </li> -->
                            <li class="list-group-item">
                                <label title="处理状态">处理状态:</label>
                                <div class="pull-left" :title=" dealState(errorDatail.abStatus)">{{ dealState(errorDatail.abStatus) }}</div>
                            </li>
                            <li class="list-group-item">
                                <label>预算埋度(m):</label>
                                <div class="pull-left">{{ errorDatail.abDeep }}</div>
                            </li>
                            <li class="list-group-item">
                                <label title="异常类型">异常类型:</label>
                                <div class="pull-left" :title="dealType(errorDatail.abType)">{{ dealType(errorDatail.abType) }}</div>
                            </li>
                            <li class="list-group-item">
                                <label title="提交时间">提交时间:</label>
                                <div class="pull-left" :title="errorDatail.updateTime" >{{ errorDatail.updateTime }}</div>
                            </li>
                             <li class="list-group-item">
                                <label title="提交人">提交人:</label>
                                <div class="pull-left" :title="errorDatail.updateBy">{{ errorDatail.updateBy }}</div>
                            </li>
                        </ul>
                </el-card>
            </el-col>

            <el-col :span="19" style="height:100%;padding:0px 10px">
                <el-row  style="height:6%">
                    <div class="exportError">
                        <el-radio-group v-model="defaultAbtype">
                            <el-radio-button label="原始基础信息"></el-radio-button>
                            <el-radio-button label="复测更新信息" :disabled="errorDatail.abStatus=='0'"></el-radio-button>
                            <el-radio-button label="验证更新信息" :disabled="errorDatail.abStatus=='0'||errorDatail.abStatus=='1'"></el-radio-button>
                        </el-radio-group>
                        <el-button type="primary" icon="el-icon-folder-opened" @click="expoerErrorData" :disabled="errorDatail.abStatus!='2'">
                            导出异常详情
                        </el-button>
                    </div>
                </el-row>
                <div style="height:94%;background:#fff;" v-if="defaultAbtype=='原始基础信息'">
                    <el-row style="height:30%" class="photo-row">
                        <div class="error-lable">
                            <div class="label-name">
                                <label>雷达剖面图</label>
                            </div> 
                        </div>
                        <div class="show-photo">
                            <!-- <el-image :src="pou_picList[0].fileBinary"  :preview-src-list="pou_picList"  style=" height: 100%;width:220px;" fit="scale-down"
                            @contextmenu.prevent.native="openMenu('relevancePicture',pou_picList[0],$event)" ></el-image> --> 
                            <!-- 右击屏蔽 -->
                            <div  v-for="(img,index) in pou_picList" :key="index" class="box-picture" >
                                <el-image  :src="dealImage(img.fileBinary)"  :preview-src-list="[baseUrl+img.fileBinary]"  class="errorThree" ></el-image>
                                <span class="layer">第{{img.layer}}层</span>
                            </div>
                        </div>
                    </el-row>
                    <el-row  style="height:30%" class="photo-row">
                        <div class="error-lable">
                            <div class="label-name">
                                <label>深度位置图</label>
                            </div> 
                        </div>
                        <div class="show-photo">
                            <div class="handleButton" @click="rowLeft" :class="btnOne=='left'?'disableBtn':''">
                                <i class="el-icon-arrow-left"/>
                            </div>
                            <div class="photo-center">
                                <div class="photo-box" :style="{left:leftOne+'px'}">
                                    <div  v-for="(img,index) in Z_picList" :key="index" class="box-picture" >
                                        <el-image :preview-src-list="[baseUrl+img.fileBinary]"  :src="dealImage(img.fileBinary)" class="errorThree">
                                        </el-image>
                                        <span class="layer">第{{img.layer}}层</span>
                                    </div>
                                </div>
                            </div>
                            <div class="handleButton" @click="rowRight" :class="btnOne=='right'?'disableBtn':''">
                                <i class="el-icon-arrow-right"/>
                            </div>
                        </div>
                    </el-row>
                    <el-row style="height:34%" class="photo-row">
                        <div class="error-lable">
                            <div class="label-name">
                                <label>地面关联图片</label>
                            </div> 
                        </div>
                        <div class="show-photo">
                            
                            <div class="handleButton" @click="rowLefter" :class="btnTwo=='left'?'disableBtn':''">
                                <i class="el-icon-arrow-left"/>
                            </div>
                            <div class="photo-center">
                                <div class="photo-box" :style="{left:leftTwo+'px'}">
                                    <div  v-for="(img,index) in guan_picList" :key="index" class="box-picture" >
                                    <el-image  :preview-src-list="[baseUrl+img.fileBinary]" :src="dealImage(img.fileBinary)" class="errorThreeTow"></el-image>
                                     <div class="layer1">{{dealThe_geom(img.theGeom)[0]}},{{dealThe_geom(img.theGeom)[1]}}</div>
                                     <!-- <div class="layer2"></div> -->
                                    </div> 
                                </div>
                            </div>
                            <div class="handleButton" @click="rowRighter" :class="btnTwo=='right'?'disableBtn':''">
                                <i class="el-icon-arrow-right"/>
                            </div>
                        </div>
                    </el-row>
                </div>
                <checkPage :errordetail="errorDatail" :abnormalType="defaultAbtype" v-if="defaultAbtype!='原始基础信息'" />
            </el-col>
        </el-row>
        <!-- 异常卡渲染 -->
        <el-dialog
            :title="title"
            :visible.sync="openAbnormal"
            width="900px"
            append-to-body
            custom-class="abnormalDialog"
            :close-on-click-modal="false"
        >
        <el-form
                ref="tableData"
                :model="tableData"
                :rules="rules"
                label-width="0"
            >
                <el-form-item class="first-header">
                    <div class="title">
                        {{tableData.road+'-'+tableData.abType+' 编号:'}}
                        <el-input class="titleNumber" v-model="customField.wordTitle" placeholder="请输入编号"/>
                    </div>
                    
                </el-form-item>
                <div class="abnormalCard">
                    <ul class="list-group list-group-striped">
                        <li class="row">
                            <div class="title-child">道路病害属性</div>
                            <div class="value">
                                
                                <el-form-item>
                                    <el-input class="" v-model="tableData.abType" placeholder=""/>
                                </el-form-item>
                            </div>
                            <div class="title-child">道路塌陷隐患风险评价等级</div>
                            <div class="value">
                                <el-select v-model="customField.dangerGrade" placeholder="请选择">
                                    <el-option
                                    v-for="item in optionsGrade"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                                
                            </div>
                        </li>
                       <li class="row">
                            <div class="title-child">平行尺寸(m)</div>
                            <div class="value">
                                <el-form-item>
                                    <el-input class="" v-model="tableData.exWidth" placeholder=""/>
                                </el-form-item>
                            </div>
                            <div class="title-child">纬度(N)</div>
                            <div class="value">
                                <el-form-item>
                                    <el-input class="" v-model="tableData.latitude" placeholder=""/>
                                </el-form-item>
                            </div>
                        </li>
                        <li class="row">
                            <div class="title-child">垂直尺寸(m)</div>
                            <div class="value">
                                <el-form-item>
                                    <el-input class="" v-model="tableData.exLength" placeholder=""/>
                                </el-form-item>
                            </div>
                            <div class="title-child">经度(E)</div>
                            <div class="value">
                                <el-form-item>
                                    <el-input class="" v-model="tableData.longitude" placeholder=""/>
                                </el-form-item>
                            </div>
                        </li>
                         <li class="row">
                            <div class="title-child">真实埋深(m)</div>
                            <div class="value">
                                <el-form-item>
                                    <el-input class="" v-model="tableData.coverHight" placeholder=""/>
                                </el-form-item>
                            </div>
                            <div class="title-child">真实净深(m)</div>
                            <div class="value">
                                <el-form-item>
                                    <el-input class="" v-model="tableData.absoluteHeight" placeholder=""/>
                                </el-form-item>
                            </div>
                        </li>
                        <li class="row">
                            <div class="title-child">所在位置</div>
                            <div class="addressValue">
                                <el-form-item>
                                    <el-input class="" v-model="tableData.address" placeholder=""/>
                                </el-form-item>
                            </div>
                            <!-- <div class="title-child">真实净深(m)</div>
                            <div class="value">
                                <el-form-item>
                                    <el-input class="" v-model="tableData.absoluteHeight" placeholder=""/>
                                </el-form-item>
                            </div> -->
                        </li>
                    </ul>                
                </div>
                <!-- <div class="photo-row">
                    <div class="table-photo">
                        <el-table
                                :data="[tableData]"
                                class="table-box"
                                >
                                <el-table-column
                                align="center"
                                label="位置描述"
                                prop="address"
                                width="150">
                                </el-table-column>
                                <el-table-column  align="center" label="中心坐标">
                                    <el-table-column
                                        align="center"
                                        label="东西方向/X"
                                        prop="abLength"
                                        width="100">
                                    </el-table-column>
                                    <el-table-column
                                        align="center"
                                        label="南北方向/Y"
                                        prop="abWidth"
                                        width="100">

                                    </el-table-column>
                                </el-table-column>
                                <el-table-column
                                    align="center"
                                    prop="xsize"
                                    label="异常点长/m"
                                    width="100">
                                </el-table-column>
                                <el-table-column
                                    align="center"
                                    prop="ysize"
                                    label="异常点宽/m"
                                    width="100">
                                </el-table-column>
                                <el-table-column
                                    align="center"
                                    prop="absoluteHeight"
                                    label="垂直高度/m"
                                    width="100">
                                </el-table-column>
                                <el-table-column
                                    align="center"
                                    prop="coverHight"
                                    label="顶部埋深/m"
                                    width="100">
                                </el-table-column>
                                <el-table-column
                                    prop="mark"
                                    align="center"
                                    label="地表现状"
                                    >
                                </el-table-column>
                        </el-table>
                    </div>
                </div> -->
                <div class="photo-row image-row">
                    <div class="error-title">
                        探测雷达剖面图
                    </div>
                    <div class="table-photo">
                        <photoshow :picList="pou_picList" @selectPicture="selectPicture" :photoType="'P'" :photo ="tableData.profileImg" />
                    </div>
                </div>
                <div class="photo-row image-row">
                    <div class="error-title">
                        探测雷达Z视图
                    </div>
                    <div class="table-photo">
                        <photoshow :picList="Z_picList" @selectPicture="selectPicture" :photoType="'Z'" :photo ="tableData.zpicture"  />
                    </div>
                </div>
                <div class="photo-row image-row">
                    <div class="error-title">
                        现场图片
                    </div>
                    <div class="table-photo">
                        <photoshow :picList="yan_picList" @selectPicture="selectPicture" :photoType="'S'" :photo ="tableData.groundImg" />
                    </div>
                </div>
                <div class="photo-row image-row">
                    <div class="error-title">
                        <div class="title-name">
                            地图位置
                        </div> 
                        <div class="title-name">
                            缺陷周边管线示意图
                        </div> 
                    </div>
                    <div class="table-map">
                        <div class="photo-show">
                            <mymap :pointdata='errorDatail' :clickMappicture="screenshot" v-if="openAbnormal"  @selectPicture="selectPicture"/>
                        </div>
                        <div class="photo-show">
                            <el-upload
                                class="avatar-uploader"
                                :action="baseUrl+uploadUrl"
                                :show-file-list="false"
                                :data="postData"
                                :headers="headers"
                                :before-upload="beforeAvatarUpload"
                                :auto-upload = "false"
                                :on-change="handleAvatarSuccess"
                                >
                                <el-image  v-if="imageUrl" :src="imageUrl" class="avatar" />
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </div>
                    </div>
                </div>
                <div class="photo-row row-line ">
                    <div class="detail-box1 image-row">
                        <div class="error-title">
                            缺陷周边管线及风险等级
                        </div>
                        <div class="table-text">
                            <ul class="list-group list-group-striped ulLeft">
                                <li class="oneheader">管线种类</li>
                                <li>
                                    <el-form-item>
                                        <el-input class="" v-model="customField.pipelineType[0]" placeholder=""/>
                                    </el-form-item>
                                </li>
                                <li>
                                    <el-form-item>
                                        <el-input class="" v-model="customField.pipelineType[1]" placeholder=""/>
                                    </el-form-item>
                                </li>
                                <li>
                                    <el-form-item>
                                        <el-input class="" v-model="customField.pipelineType[2]" placeholder=""/>
                                    </el-form-item>
                                </li>
                                <li>
                                    <el-form-item>
                                        <el-input class="" v-model="customField.pipelineType[3]" placeholder=""/>
                                    </el-form-item>
                                </li>
                                <li>
                                    <el-form-item>
                                        <el-input class="" v-model="customField.pipelineType[4]" placeholder=""/>
                                    </el-form-item>
                                </li>

                            </ul>
                            <ul class="list-group list-group-striped ulRight">
                                <li class="oneheader">距离</li>
                                 <li>
                                    <el-form-item>
                                        <el-input class="" v-model="customField.distance[0]" placeholder=""/>
                                    </el-form-item>
                                </li>
                                <li>
                                    <el-form-item>
                                        <el-input class="" v-model="customField.distance[1]" placeholder=""/>
                                    </el-form-item>
                                </li>
                                <li>
                                    <el-form-item>
                                        <el-input class="" v-model="customField.distance[2]" placeholder=""/>
                                    </el-form-item>
                                </li>
                                <li>
                                    <el-form-item>
                                        <el-input class="" v-model="customField.distance[3]" placeholder=""/>
                                    </el-form-item>
                                </li>
                                <li>
                                    <el-form-item>
                                        <el-input class="" v-model="customField.distance[4]" placeholder=""/>
                                    </el-form-item>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="detail-box2 image-row">
                        <div class="error-title">
                            图例
                        </div>
                        <div class="examples">
                             <el-image  :src="mypicture" class=""  fit="scale-down" />
                        </div>
                    </div>
                </div>
                <div class="photo-row row-line ">
                    <div class="detail-box image-row">
                        <div class="error-title">
                            初步成因分析
                        </div>
                        <div class="table-text">
                            <el-input
                                type="textarea"
                                :rows="2"
                                placeholder="请输入内容"
                                v-model="tableData.preliminaryCauses">
                            </el-input>
                        </div>
                    </div>
                    <div class="detail-box image-row">
                         <div class="error-title">
                            处置建议
                        </div>
                        <div class="table-text">
                            <el-input
                            type="textarea"
                            :rows="2"
                            placeholder="请输入内容"
                            v-model="tableData.suggestions">
                            </el-input>
                        </div>
                    </div>
                </div>
        </el-form>
        <div
            slot="footer"
            class="dialog-footer"
        >
            <el-button
                type="primary"
                @click="submitFormAbnormal"
            >保存导出</el-button>
            <el-button @click="cancelAbnormal">取 消</el-button>
        </div>
        </el-dialog>
         <!-- 添加信息对话框 -->
        <el-dialog
            :title="title"
            :visible.sync="open"
            width="800px"
            append-to-body
            custom-class=""
            :close-on-click-modal="false"
        >
            <el-form
                ref="form"
                :model="form"
                :rules="rules"
                label-width="100px"
            >
                <el-form-item
                    label="异常点名称"
                    prop="abName"
                >
                    <el-input
                        v-model="form.abName"
                        placeholder="请输入异常点名称"
                        :disabled="true"
                    />
                </el-form-item>
                 <el-form-item
                    label="编号"
                    prop="abnormalId"
                    
                >
                    <el-input v-model="form.abnormalId" :disabled="true" />
                </el-form-item>
                <el-form-item
                    label="长度(m)"
                    prop="abLength"
                >
                    <el-input
                        v-model="form.abLength"
                        placeholder=""
                    />
                </el-form-item> 
                <el-form-item
                    label="宽度(m)"
                    prop="abWidth"
                >
                    <el-input
                        v-model="form.abWidth"
                        placeholder=""
                    />
                </el-form-item>  
                <el-form-item
                    label="深度(m)"
                    prop="abDeep"
                >
                    <el-input
                        v-model="form.abDeep"
                        placeholder=""
                    />
                </el-form-item> 
                <el-form-item
                    label="异常类型"
                    prop="abType"
                >
                <el-select v-model="form.abType" placeholder="请选择">
                    <el-option
                    v-for="item in verificationList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                    </el-option>
                </el-select>
                </el-form-item>  
            </el-form>
            <div
                slot="footer"
                class="dialog-footer"
            >
                <el-button
                    type="primary"
                    @click="submitForm"
                >确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
        <ul
            v-show="visible"
            :style="{left:left+'px',top:top+'px'}"
            class="contextmenu"
        >
            <li @click="uploadPhoto(tagUrl,photoType)">设为导出图</li>
            <!-- <li @click="openNewWindow(tagUrl)">在新的标签打开图片</li> -->
        </ul>
    </div>
</template>

<script>
import { saveAs } from 'file-saver'
import { getToken } from "@/utils/auth";
import {  MessageBox,msgSuccess } from 'element-ui'
import {getErrorDetail,putErrorDetail,uploadData,getErrorPhoto,getAbnormalInfo,getAb,deleteImg,dowload} from "@/api/data/proData"
import checkPage from './components/check.vue';
import photoshow from './components/photoshow.vue';
import mymap from './components/smallMap.vue';
export default {
    name: "project",
    components:{
			checkPage,
            photoshow,
            mymap
		},
    data() {
        return {
        //默认选项
        defaultAbtype:'原始基础信息',
        //图片
        imageUrl:undefined,
        //上传地址
        uploadUrl:"/abnormalExport/upload",
        //上传header
        headers:{'GeomativeAuthorization':'Geomative ' + getToken()},
        //图片基本地址
        mypicture:require('@/assets/images/pictureEXp.jpg'),
        // base_url:baseUrl,
        //上传附带参数
        postData:{'abnormalId':""},
        errorDatail:{"ID":18850,   //数据点id
		"name":"异常错误",   //数据点名称
		"type":"异常点",        //数据点类型
		"frame_geom":"POINT(113.943490234981 22.568621795458)", //点位坐标
		"zoom":14,             //地图显示层级
		"createTime":"2021-01-13 09:54:13",  //创建时间
        "dealTime":"2021-01-13 09:54:13",
		"createName":"张三",  //异常编写人
		"height":0.24,       //净高
		"top_height":0.25,    //下底深度
		"bottom_height":0.25,  //上顶深度
		"positionY":1.1,
        "positionX":0.9,    //方位【南北，东西】
        "dealMethod":'钻孔',
        "relevancePicture":[{"name":"filename1","url":"file/binarystream","uid":1615183502776}],    //关联图片地址
        "radarTile":[{"name":"filename1","url":"file/binarystream","uid":1615183502776}],   
        //雷达切片地址
        "profile":[{"name":"filename1","url":"file/binarystream","uid":1615183502776}],    
        //剖面图地址
        "exportData":{"name":"filename1","url":"file/binarystream","uid":1615183502776}
        //异常详情下载
            },
        //异常状态列表
		stateList: [{
						id:'0',
						name: '未复测',
						disabled: false
					},
					{
						id:'1',
						name: '待验证',
						disabled: false
					},
					{	
						id:'2',
						name: '真异常',
						disabled: false
					},
					{
						id:'3',
						name: '假异常',
						disabled: false
					}],
        //复测方式列表
        verificationList:[
            {
                id:'0',
                name: '空洞',
                disabled: false
            },
            {
                id:'1',
                name: '空脱',
                disabled: false
            },
            {	
                id:'2',
                name: '一般疏松体',
                disabled: false
            },
            {
                id:'3',
                name: '严重疏松体',
                disabled: false
            },
            {
                id:'4',
                name: '富水体',
                disabled: false
            }
        ],
        //剖面图
        pou_picList:[], 
        //z视图
        Z_picList:[],
        //关联图
        guan_picList:[],  
        //关联图
        yan_picList:[],     
        //图片左移距离
        leftOne:0,
        //是否为不可点击样式
        btnOne:"left",
        leftTwo:0,
        btnTwo:"left",
        //修改详情对话框
        open:false,
        //提交表单
        form: {},
        //表单验证
        rules:{
                roleName: [
                    { required: true, message: "角色名称不能为空", trigger: "blur" }
                ],
                permissions: [
                    { required: true, message: "岗位权限不能为空", trigger: "blur" }
                ]
            },
        //弹出对话框名称
        title:'',  
        //是否显示
        visible:false,
        //右击出现位置
        left:'',top:'',
        //右击目标url
        tagUrl:'',
        //右击图片类型
        photoType:"",
        loading:false,
        //异常id
        errorID:"",
        //异常卡
        openAbnormal:false,
        //异常卡信息
        tableData:{},
        customField:{
                dangerGrade:"未分级",
                distance:[],
                pipelineType:[],
            },
        clickIndex:undefined,
        //选中z视图
        Z_index:undefined,
        //选中剖面图
        P_index:undefined,
        //选中关联图
        S_index:undefined,
        //等级选择
        optionsGrade: [{
          value: 'Ⅰ',
          label: 'Ⅰ'
        }, {
          value: 'Ⅱ',
          label: 'Ⅱ'
        }, {
          value: 'Ⅲ',
          label: 'Ⅲ'
        }, {
          value: 'Ⅳ',
          label: 'Ⅳ'
        }, {
          value: 'Ⅴ',
          label: 'Ⅴ'
        },
        {
          value: '未分级',
          label: '未分级'
        }
        ],
        //点击截图触发
        screenshot:0
                };

    },
    watch:{
        visible(value) {
            if (value) {
                document.body.addEventListener('click', this.closeMenu)
            } else {
                document.body.removeEventListener('click', this.closeMenu)
            }
        }
    },
    created(){
        this.errorID = this.$route.params.ID;
        this.getList();
        this.getPouPhoto()
        this.getZ_XPhoto()
        this.getGuanPhoto()
        this.getYanPhoto()
    },
    methods: {
        //获取详情信息
        getList() {
            this.loading = true;
            getErrorDetail(this.errorID).then(
                response => {
                    if(response.data){
                        this.errorDatail = response.data;
                        this.form = response.data
                        this.loading = false;
                        this.postData.abnormalId = this.errorDatail.abnormalId
                    }
                    else{
                        MessageBox.confirm('异常ID无效', '系统提示', {
                            confirmButtonText: '请关闭',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {

                        })
                    }
                    
                }
            );
        },
        //获取剖面图
        getPouPhoto(){
            let data = {
                id:this.errorID,
                picType:"P",
                checkType:"0"
            }
            this.loading = true;
            getErrorPhoto(data).then(
                 response => {
                    if(response.data){
                        this.pou_picList = response.data;
                        this.loading = false;
                    }
                 }
            )
        },
        //获取z视图
        getZ_XPhoto(){
            let data = {
                id:this.errorID,
                picType:"Z",
                checkType:"0"
            }
            this.loading = true;
            getErrorPhoto(data).then(
                 response => {
                    if(response.data){
                        this.Z_picList = response.data;
                        this.loading = false;
                    }
                 }
            )
        },
        //获取关联图
        getGuanPhoto(){
            let data = {
                id:this.errorID,
                picType:"S",
                checkType:"0"
            }
            this.loading = true;
            getErrorPhoto(data).then(
                response => {
                    if(response.data){
                        this.guan_picList = response.data
                        this.loading = false;
                    }
                }
            )
        },
        //获取验证关联图
        getYanPhoto(){
            let data = {
                id:this.errorID,
                picType:"S",
                checkType:"2"
            }
            this.loading = true;
            getErrorPhoto(data).then(
                response => {
                    if(response.data){
                        this.yan_picList = response.data
                        this.loading = false;
                    }
                }
            )
        },
        //编辑按钮
        handleUpdateProject(){
            this.form = this.errorDatail;
            this.open = true;
            this.title = "修改异常信息";
        },
        //左移动按钮点击
        rowLeft(){
           if(this.leftOne!=0){
                this.btnOne=""
                this.leftOne=this.leftOne+240;
            } 
            else{
                this.btnOne="left";
            }    
        },
        //右移动按钮点击
        rowRight(){
             let nub= this.Z_picList.length-2
            if(this.leftOne>-240*nub){
                this.btnOne=""
                this.leftOne=this.leftOne-240;
            }
            else{
                this.btnOne="right"
            }
         },   
        //左移动按钮点击
        rowLefter(){
            if(this.leftTwo!=0){
                this.btnTwo=""
                this.leftTwo=this.leftTwo+240;
            } 
            
            else{
                this.btnTwo="left"
            }
        },
        //右移动按钮点击
        rowRighter(){
            let nub= this.guan_picList.length-2
            if(this.leftTwo>-240*nub){
                this.btnTwo=""
                this.leftTwo=this.leftTwo-240;
            }
            else{
                this.btnTwo="right";
            }    
        },
        //导出异常信息
        expoerErrorData(){
            this.openAbnormal = true;
            this.title = "异常卡导出编辑";
            getAbnormalInfo(this.errorDatail.abnormalId).then(
                res=>{
                    if(res.code = 200){
                        getAb(this.errorDatail.abnormalId).then(
                            response=>{
                                this.tableData = response.data
                                this.customField = JSON.parse(this.tableData.customField)
                                if(this.customField){
                                    if (!this.customField.distance) {
                                        this.customField.dangerGrade = []
                                    }
                                    if (!this.customField.pipelineType) {
                                        this.customField.pipelineType = []
                                    }
                                    if (!this.customField.dangerGrade) {
                                        this.customField.dangerGrade = "未分级"
                                    }
                                    // this.tableData.customField =customField
                                }
                                else{
                                   this.customField= {
                                                    dangerGrade:"未分级",
                                                    distance:[],
                                                    pipelineType:[],
                                                }
                                }
                                if (this.customField.pipelinePicture) {
                                    this.imageUrl = this.customField.pipelinePicture
                                } 
                            }
                        )
                    }
                }
            )
         
        },
        //重置表单
        reset() {
            this.form = {};
            this.resetForm("form");
        },
        //异常卡取消按钮
        cancelAbnormal() {
            this.openAbnormal = false;
        },
        //异常卡确认按钮
        submitFormAbnormal() {

            this.tableData.region= tableData.address
            this.screenshot+=1;
            // console.log("1")
            // const formData = new FormData(this.tableData)
            
         },
        // 编辑取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        /** 编辑提交按钮 */
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    putErrorDetail(this.form).then(response => {
                        this.msgSuccess("修改成功");
                        this.getList();
                        this.open = false;
                    });
                }
            })
        },
        // 右击按钮
        openMenu(type,index,tag, e) {
            const menuMinWidth = 10
            const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
            const offsetWidth = this.$el.offsetWidth // container width
            const maxLeft = offsetWidth - menuMinWidth // left boundary
            const left = e.clientX - offsetLeft + 15 // 15: margin right
            if (left > maxLeft) {
                this.left = maxLeft
            } else {
                this.left = left
            }
            this.clickIndex = index
            this.photoType = type
            this.top = e.clientY-10
            this.tagUrl = tag
            this.visible = true
        },
        //取消右击显示
        closeMenu() {
            this.visible = false
        },
        //在新的窗口打开图片
        openNewWindow(url){
            // console.log(url)
            let routeData= this.$router.resolve({
                path:url
                });
            window.open(routeData.location.path, "_blank");
        },
        //选择图片
        uploadPhoto(url,type){
           if(type=="Z"){
               this.Z_index=this.clickIndex;
            }
            else if (type=="P") {
                this.P_index = this.clickIndex
            }
            else{
                 return index==this.clickIndex
            }
        },
        //处理坐标点
        dealThe_geom(val){
            if(val){
                let coordinate = val.replace('POINT(',"").replace(")","").split(" ")
                return [parseFloat(coordinate[0]).toFixed(7),parseFloat(coordinate[1]).toFixed(8)]
            }
            else{
                return ""
            }
        },
        //处理异常状态
        dealState(val){
            if(val){
                let data = this.stateList.filter(item => { return item['id']==val })[0]
                return data.name
            }
            else{
                return ""
            }
        },
        //处理异常分类
        dealType(val){
            if(val){
                let data = this.verificationList.filter(item => { return item['id']==val })[0]
                return data.name
            }
            else{
                return ""
            }
        },
        deleteImage(value){
            let data={
                "abnormalId":this.errorDatail.abnormalId,
                "vectorgraph":value
            }
            deleteImg(data).then(
                res=>{
                     if(res.code = 200){
                        this.handleAvatarSuccess()
                    }
                }
            )
        },
        //上传文件改变
        handleAvatarSuccess(file){
            this.imageUrl = URL.createObjectURL(file.raw);
            var reader = new FileReader();
            // console.log(file)
            reader.readAsDataURL(file.raw);
            reader.onload = (e)=>{
                // console.log(e.target.result)
               this.customField.pipelinePicture = e.target.result; //获取到base64格式图片
            };
            
        },
        //blob转为bas64
        blobToDataURI(blob, callback) {
            let res=""
            var reader = new FileReader();
            reader.readAsDataURL(blob);
            reader.onload = function (e) {
               res=  e.target.result;
            }
            return res
        },
        //上传后样式
        isActive(index,type){
            if(type=="Z"){
                return index==this.Z_index
            }
            else if (type=="P") {
                return index==this.P_index
            }
            else{
                 return index==this.S_index
            }
        },
        //选择导出图片
        selectPicture(url,type){
            if(type=="Z"){
                this.tableData.zpicture = url
            }
            else if (type=="P") {
              this.tableData.profileImg = url
            }
            else if(type=="S"){
               this.tableData.groundImg = url
            }
            else{
                var reader = new FileReader();
                reader.readAsDataURL(url);
                reader.onload = (e) =>{
                    console.log("2")
                    this.customField.interceptPicture = e.target.result;
                    this.tableData.customField=JSON.stringify(this.customField)
                    uploadData(this.tableData).then(
                        res=>{
                            let url=this.baseUrl+"/abnormalExport/export/"+this.errorDatail.abnormalId
                            if(typeof jsToNative=="function"){
                                let url="/abnormalExport/export/"+this.errorDatail.abnormalId
                                jsToNative('SaveAsFile',url)
                                this.openAbnormal = false;
                            }else{
                                saveAs(url) 
                                // dowload(this.errorDatail.abnormalId).then(
                                //     res=>{
                                //         console.log("111")
                                //         saveAs(res) 
                                //     }
                                // )
                                this.openAbnormal = false;
                            } 
                        }
                    )
                    // this.msgSuccess("截图保存成功");
                }
            }
           
        },
        //上传前
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
            }
        
            return isJPG && isLt2M;
        },
        //缩略图获取
        dealImage(val){
            let imagepath= val.split("/")
            imagepath.splice(imagepath.length-1,0,"compress")
            // console.log(imagepath.join("/"))
            return this.baseUrl+imagepath.join("/")
        },
        //标题图
        titleImage(val){
            if(val!=""){
                return this.baseUrl+val
            }
            else{
                return require('@/assets/images/title.jpg')
            }
        }
    }
}
</script>
<style scoped lang="scss">
.abnormalDialog{
    .photo-row{
        margin: 20px ;
        padding-right: 0px;
         .table-photo{
                // display: flex;
                // justify-content: space-between;
                // align-items: center;
                .show-photo{
                    height: 90%;
                    margin-top: 20px;
                    padding-left: 0px; 
                }
                margin-top: 20px;
                height: 200px;

            }
        .table-map{
            // margin-top: 20px;
            display: flex;
            box-sizing: border-box;
            height: 340px;
            .photo-show{
                padding: 20px;
                box-sizing: border-box;
                height: 100%;
                position: relative;
                width: 50%;
            }
        }
        .table-box{
            width: 820px;
        }
    }
    .row-line{
        display: flex;
        justify-content:space-between;
        .detail-box{
            width: 48%;
        }
        .detail-box1{
            width: 70%;
            .table-text{
                display: flex;
                ul{
                    width: 50%;
                    margin: 0px;
                    .oneheader{
                        background: #F5F7FA;
                    }
                    li{
                       border: 1px solid #EBEEF5;
                       height: 40px;
                        font-weight: 500;
                        color: #222222;
                        line-height: 40px;
                        font-size: 13px;
                        text-align: center;
                    }
                }
            }
        }
        .detail-box2{
            width: 25%;
            .examples{
                padding: 10px;
            }
        }
    }
    .image-row{
        border: 1px solid #EBEEF5;
        .error-title{
            height: 40px;
            font-weight: 500;
            color: #222222;
            line-height: 40px;
            font-size: 13px;
            text-align: center;
            background: #F5F7FA;
            .title-name{
                width: 50%;
                display: inline-block;
            }
        }
        .table-photo{
            margin: 0px;
            .eachPhoto{
                margin-left: 30px;
                overflow: hidden;
                display: inline-block;
                position: relative;
                display: flex;
                justify-content: space-between;
                align-items: center;
                height: 320px;
                width: 380px;
                .deleteIcon{
                    position: absolute;
                    top: 0px;
                    right: 0px;
                    font-size: 24px;
                }
                .deleteIcon:hover{
                    color: #3066FF;
                    cursor: pointer;
                }
            }
            .photo-show{
                padding: 20px;
                width: 50%;
            }
        }
    }
    .first-header{
        display: flex;
        justify-content: center;
        //异常卡编辑
        .title{
            // width: 60%;
            display: flex;
            // margin-left:20% ;
            .titleNumber{
                width: 300px;
            }
        }
    }
}
.avatar-uploader {
    width: 100%;
    height: 100%;
    // display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    .el-upload {
    width: 100%;
    height: 100%;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    // position: relative;
    }
    .el-upload:hover {
    border-color: #409EFF;
    }
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 100%;
height: 100%;
display: block;
}
.abnormalCard{
    padding: 20px;
    padding-bottom: 0px;
    // border-bottom: 2px solid #EDEFF4;
    // display: flex;
    // justify-content: space-between;
    // align-items: center;
    .list-group {
        width:100%;
        
        border: 1px solid #EBEEF5;
        color: #43454D; 
        .row{
            display: flex;
            border-bottom: 1px solid #EBEEF5;
            .title-child{
                width: 25%;
                font-size: 13px;
                font-weight: 500;
                color: #222222;
                line-height: 40px;
                background: #F5F7FA;
                text-align: center;
                height: 40px;
            }
            .value{
                width: 25%;
                text-align: center;
                font-size: 13px;
                font-weight: 500;
                color: #222222;
                line-height: 18px;
            }
            .addressValue{
                width: 75%;
                text-align: center;
                font-size: 13px;
                font-weight: 500;
                color: #222222;
                line-height: 18px;
            }
        }    
    }
}
.abnormalDialog .el-form-item {
    margin-bottom: 0px;
}
.app-container{
    height:100% ;
    position: absolute;
    width: 100%;
    padding-right: 0;
    box-sizing: border-box;
}
.errorCard{
    height:100% ;
}
.errorHrader{
    text-align: left;
    padding: 7px 0;
}
.errorCard ul{
    margin: 0px 0px;
}
.errorDatail .el-card__body{
    padding: 0px 0px;
}
.list-group-item{
    border: none;
    padding: 8px 0px;
}
.list-group-item label{
    display: inline-block;
    width: 35%;
    text-align: left;
    white-space: nowrap;
    color: rgba(67, 69, 77, 1);
    text-overflow: ellipsis;
    overflow: hidden;
}
.list-group-item .pull-left{
    margin-left: 2%;
    display: inline-block;
    text-align: left;
    width: 63%;
    color: rgba(34, 34, 34, 1);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.show-img{
    width: 100%;
    display: flex;
    justify-content: center;
    height: 150px;
    img{
        border: solid 1px rgba(46, 55, 74, 0.16);
    }
    /* background: chartreuse; */
    .imgtitle{
        
        width: 50%;
        height: 150px;
    }
}
.exportError{
    background: white;
    height: 100%;
    display: flex;
    align-items: center; 
    justify-content:space-between;
    padding:0px 26px;
    box-shadow: 0px 3px 6px 0px rgba(46, 55, 74, 0.16);
}
.error-lable{
    height:25%;
    display: flex;
    align-items: center; 
    padding-left: 26px;
    position: relative;
}
.label-name:before{
    content: " ";
    position: absolute;
    width: 3px;
    display: inline-block;
    height: 16px;
    /* right: -20px; */
    top: 50%;
    transform: translateY(-50%);
    background-color: #5378FF;
}
.label-name label{
    font-weight: bold;
    margin-left: 20px;
}
.show-photo{
    padding-left: 26px;
    height: 75%;
    /* width: 90%; */
    display: flex;
}
.handleButton{
    width: 3%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #43454D;
    cursor: pointer;
}
.handleButton:hover{
    background: #9FA2AE;
}
.handleButton i{
    /* height: 20px; */
    font-size: 32px;
    color: white;

}
.disableBtn{
    background: #9FA2AE;
    cursor: not-allowed;
}
.photo-center{
    width: 94%;
    height: 100%;
    display: flex;
    // align-items: center;
    position: relative;
    overflow:hidden;
}
/* 图片 */
.errorThree{
    height:calc(100% - 2px);
    width:220px;
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);
    // margin-left: 20px;
    /* display: inline-block; */
    
}
.photo-box{
    position: absolute;
    height: 100%;
    display: inline-block;
    white-space: nowrap;
    padding-right: 20px;
    -moz-user-select:none;/*火狐*/
    -webkit-user-select:none;/*webkit浏览器*/
    -ms-user-select:none;/*IE10*/
    -khtml-user-select:none;/*早期浏览器*/
    user-select:none;
}

.errorThreeTow{
    height: 100%;
    /* width:630px; */
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);
    width:220px;
    margin-left: 20px;
}


.contextmenu {
    margin: 0;
    background: #3066FF;
    z-index: 3000;
    position: absolute;
    list-style-type: none;
    padding: 5px 0;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 400;
    color: #333;
    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
}
.contextmenu li {
    margin: 0;
    padding: 7px 16px;
    cursor: pointer;
}
.contextmenu li:hover {
    background: #3066FF;
}
.photo-row{
    padding-right: 10px;
    // display: inline-block; 
}
.box-picture{
    display: inline-block;
    height: calc(100% - 5px);
    width:220px;
    margin-left: 20px;
    position: relative;
    .layer{
        position: absolute;
        color: white;
        left: 0px;
        top: 0px;
        padding:2px 5px;
        font-size: 14px;
        background: rgba(0, 0, 0, 0.7);
    }
    .layer1{
        position: absolute;
        color: white;
        left: 20px;
        bottom: 0px;
        padding:2px 5px;
        font-size: 14px;
        width: calc(100% - 10px);
        background: rgba(0, 0, 0, 0.7);
    }
    .layer2{
        position: absolute;
        color: white;
        left: 20px;
        bottom: 10px;
        padding:2px 5px;
        background: rgba(0, 0, 0, 0.7);
    }
}
.active{
    border: 2px solid #3066FF;
}
</style>

